<template>
  <!-- 无限滚动指令 -->
  <div id="load">
    <ul
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="5"
      class="page-infinite-list"
    >
      <li
        class="page-infinite-listitem"
        v-for="(item,index) in list"
        :key="index"
      >
        <img :src="item.imgSrc">
        <br>
        <br>
        {{item.content}}
      </li>
    </ul>
    <!-- 加载动画 -->
    <div
      v-show="showLoading"
      id="loading"
    >
      <mt-spinner
        type="triple-bounce"
        color="#26a2ff"
        :size="60"
      ></mt-spinner>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      showLoading: false,
      list: [
        { content: '平原上的摩西', imgSrc: require('./images/movie1.jpg') },
        { content: '釜山行2·半岛', imgSrc: require('./images/movie2.jpg') },
        { content: '龙虎山张天师', imgSrc: require('./images/movie3.jpg') },
        { content: '倩女幽魂人间情', imgSrc: require('./images/movie4.jpg') },
        { content: '毒液2：屠杀开始', imgSrc: require('./images/movie5.jpg') },
        { content: '寻龙诀', imgSrc: require('./images/movie6.jpg') }
      ]
    }
  },
  methods: {
    loadMore () {
      // this.dataApi()
      this.loading = true
      this.showLoading = true

      setTimeout(() => {
        var last = {
          content: '加载的数据',
          imgSrc: require('./images/movie' + 3 + '.jpg')
        }
        var last1 = {
          content: '加载的数据',
          imgSrc: require('./images/movie' + 2 + '.jpg')
        }
        this.list.push(last)
        this.list.push(last1)
        this.loading = false
        this.showLoading = false
      }, 2500)
    },
    dataApi () {
      axios.post('http://localhost:3000/api/data/data').then((response) => {
        //  response.data
        const data = response.data.data
        console.log(data)
      })
    }
  }
}
</script>

<style scoped>
#load {
  width: 100%;
  margin-top: 20px;
}
/* 滑动加载 */
.page-infinite-list {
  overflow: hidden;
}
.page-infinite-listitem:first-child {
  border-top: 1px solid #eee;
}
.page-infinite-listitem {
  float: left;
  height: 280px;
  width: 50%;
}
.page-infinite-listitem {
  text-align: center;
  border-bottom: 1px solid #eee;
}
.page-infinite-listitem img {
  width: 90%;
}
/* 加载动画 */
#loading {
  margin-top: 50px;
  text-align: center;
}
</style>
